import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';

/// 收藏、点赞按钮 封装动效
class AppSpreadIcon extends StatefulWidget {
  final String path; // svg 路径
  final int flag; // 标志
  final Color flagColor; // 标记为true时的颜色
  final Color noFlagColor; // 标记为false时的颜色
  final VoidCallback onTap; // 点击事件
  final double size;

  const AppSpreadIcon({
    required this.path,
    required this.flag,
    required this.onTap,
    required this.flagColor,
    required this.noFlagColor,
    this.size = 16,
    Key? key,
  }) : super(key: key);

  @override
  State<AppSpreadIcon> createState() => _AppSpreadIconState();
}

class _AppSpreadIconState extends State<AppSpreadIcon> with TickerProviderStateMixin  {
  late AnimationController _animationController;
  late AnimationController _rippleController; // 扩散动画控制器
  late Animation<double> _scaleAnimation;
  late Animation<double> _rippleAnimation; // 扩散半径动画

  bool _isAnimatingRipple = false;

  @override
  void initState() {
    super.initState();
    // 初始化缩放动画控制器
    _animationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200), // 缩放动画时长
    );
    // 定义缩放动画
    _scaleAnimation = TweenSequence([
      TweenSequenceItem(tween: Tween(begin: 1.0, end: 0.8), weight: 50), // 先缩小
      TweenSequenceItem(tween: Tween(begin: 0.8, end: 1.0), weight: 50), // 再放大
    ]).animate(_animationController);


    // 初始化扩散动画控制器
    _rippleController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 400), // 扩散动画时长
    );
    // 定义扩散半径动画
    _rippleAnimation = Tween<double>(begin: 0.0, end: 12.0).animate(
      CurvedAnimation(
        parent: _rippleController,
        curve: Curves.easeOutQuad,
      ),
    );
  }
  @override
  void dispose() {
    _animationController.dispose();
    _rippleController.dispose();
    super.dispose();
  }
  void _handleTap() {
    // 播放缩放动画
    _animationController.reset();
    _animationController.forward();
    // 播放圆圈扩散效果
  
    // 判断 flag == 0 才播放扩散动画
    if (widget.flag == 0) {
      Future.delayed(const Duration(milliseconds: 200), () {
        setState(() => _isAnimatingRipple = true);
        _rippleController.reset();
        _rippleController.forward().whenComplete(() {
          setState(() => _isAnimatingRipple = false);
        });
      });
    }
    // 执行点击回调
    widget.onTap();
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
        child: Stack(
          alignment: Alignment.center,
          children: [
            // 圆形边框扩散动画
            if (_isAnimatingRipple)
              Positioned.fill(
                child: AnimatedBuilder(
                  animation: _rippleAnimation,
                  builder: (context, child) {
                    return CustomPaint(
                      painter: RipplePainter(radius: _rippleAnimation.value ,gap: widget.size/3,  color:widget.flagColor),
                    );
                  },
                ),
              ),
            // 缩放动画的收藏图标
            ScaleTransition(
              scale: _scaleAnimation,
              child: SvgPicture.asset(
                widget.path,
                width: widget.size,
                height: widget.size,
                colorFilter: ColorFilter.mode(
                  widget.flag == 0
                      ? widget.noFlagColor
                      : widget.flagColor,
                  BlendMode.srcIn,
                ),
              ),
            ),
          ],
        ),
      
    );
  }
}

class RipplePainter extends CustomPainter {
  final Color color; // 圆线颜色
  final double radius; // 当前动画半径
  final double gap; // 圆与SVG之间的间隙
  RipplePainter({required this.radius, required this.color, this.gap = 8.0});
  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = color.withOpacity((1 - radius / 40).clamp(0.3, 1.0))
      ..style = PaintingStyle.stroke // 只绘制边框
      ..strokeWidth = 1.6;
    // 计算圆的中心
    final Offset center = Offset(size.width / 2, size.height / 2);
    // 绘制动态扩散的圆圈
    canvas.drawCircle(center, radius + gap, paint);
  }
  @override
  bool shouldRepaint(covariant RipplePainter oldDelegate) {
    return oldDelegate.radius != radius;
  }
}